<template>
  <div :class="computedClassBox">
    <span :class="computedClassTitle">{{ title }}</span>  
    <input 
      @blur="isActive = false"  
      @focus="isActive = true"  
      :value="modelValue"
      :type="type"
      @input="$emit('update:model-value', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: 'LoginInput',
  props:['title', 'modelValue', 'type'],
  emits:["update:model-value"],

  data(){
    return{
      isActive: false,
    }
  },
  //计算属性
  computed:
  {
    computedClassBox()
    {

      if(!this.isActive)
      {  
        return this.setActive()?'inputBox roundy-10 inputBox-hide':'inputBox roundy-10'
      }
      
      else
      { 
        return 'inputBox roundy-10 inputBox-active'
      }
    },
    computedClassTitle()
    {
      if(!this.isActive)
      {  
        return this.setActive()?'title cantSelect title-hide':'title cantSelect'
          
      }
      else
      { 
        return 'title cantSelect title-active'
      }
    }
  },
  methods:{
    //用于判断是否输入的内容为无意义字符（如空格）或为输入任何内容，如果是返回false
    setActive(){
      return !this.modelValue.trim()==""
    },

    translateDataToParent(){
      this.$emit("input", this.input)
    },
  },
}
</script>

<style scoped>
.inputBox {
  transition: all 0.2s;
  height: 60px;
  width: 400px;
  border: 1px solid rgb(207, 207, 207);
  padding: 5px;
  padding-left: 15px;
  box-sizing: border-box;
  line-height: 42px;
  text-align: left;
}
.inputBox-active {
  transition: all 0.2s;
  border: 2px solid rgb(103, 103, 221);
}
.inputBox-hide {
  transition: all 0.2s;
  border: 1px solid  rgb(207, 207, 207);
}

.title {
  transition: all 0.2s;
  position: absolute;
  pointer-events: none;
  color: rgb(85, 85, 85);
}

.title-active {
  transition: all 0.2s;
  color: rgb(103, 103, 221);
  transform: translate(-5px, -15px);
  background-color: rgb(255, 255, 255);
  font-size: 18px;
  line-height: 1em;
  z-index: 0;
}
.title-hide {
  transition: all 0.2s;
  color:  rgb(85, 85, 85);
  transform: translate(-5px, -15px);
  background-color: rgb(255, 255, 255);
  font-size: 18px;
  line-height: 1em;
  z-index: 0;
}
input {
  border: none;
  outline: none;
  height: 100%;
  font-size: 16px;
  z-index: 2;
  background-color: transparent;
  width: 90%;
}
</style>
